@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$cell-width: 360px;
$cell-height: 280px;

.card {
  @include composite-var($sans-body-m);

  cursor: pointer;

  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: $cell-width;
  height: $cell-height;
  padding: 8px;

  color: $sys-primary-text-main;
  text-align: center;
  text-decoration: none;

  background-color: $sys-neutral-background1-level;
  border: 0;
  border-radius: 16px;

  transition: background-color 100ms;

  &[data-small] {
    @include composite-var($sans-body-s);

    gap: 4px;
    width: calc($cell-width / 1.75);
    height: calc($cell-height / 1.75);
  }


  &:hover {
    background-color: $sys-primary-decor-hovered;
  }

  &:focus-visible {
    @include outline-var($container-focused-s);

    background-color: $sys-primary-decor-hovered;
    outline-offset: $spacing-state-focus-offset;
  }

  &:active {
    background-color: $sys-primary-decor-hovered;
  }
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
}